<template>
  <ModalBox title="上傳文件" ref="modalRef">
    <a-upload-dragger
      v-model:fileList="fileList"
      name="file"
      :multiple="false"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
      @change="handleChange"
      @drop="handleDrop"
    >
      <p class="ant-upload-drag-icon">
        <inbox-outlined></inbox-outlined>
      </p>
      <p class="ant-upload-text">點擊或拖放文件到此區域上傳</p>
      <p class="ant-upload-hint">嚴禁上傳禁止的文件</p>
    </a-upload-dragger>
  </ModalBox>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ModalBox from './ModalBox.vue'
import { InboxOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import type { UploadChangeParam } from 'ant-design-vue'
const fileList = ref([])
const handleChange = (info: UploadChangeParam) => {
  const status = info.file.status
  if (status !== 'uploading') {
    console.log(info.file, info.fileList)
  }
  if (status === 'done') {
    message.success(`${info.file.name} file uploaded successfully.`)
  } else if (status === 'error') {
    message.error(`${info.file.name} file upload failed.`)
  }
}
function handleDrop(e: DragEvent) {
  console.log(e)
}
const modalRef = ref()

const open = () => {
  modalRef.value.open()
}

const close = () => {
  modalRef.value.close()
}

defineExpose({
  open,
  close,
})
</script>
